<template>
  <div class="mv-simi" v-if="mvDatas">
    <template v-for="item in mvDatas" :key="item.id">
      <card-item :item="item" v-bind="configObj">
        <template #topIcon>
          <el-icon
            style="padding-top: 2px; padding-left: 15px; font-size: 15px"
          >
            <video-camera />
          </el-icon>
        </template>
        <template #userName="scope">
          <div class="dt-right">
            <span>{{
              $filters.formatMusicTime(
                scope.row.duration || scope.row.durationms
              )
            }}</span>
          </div>
        </template>
      </card-item>
    </template>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps } from 'vue'
import CardItem from '@/base-ui/card-item'
import { getMvSimi } from '@/service/mvvideo'
import { getViSimi } from '@/service/videoplay'

const props = defineProps({
  mvid: {
    type: [Number, String],
    required: true
  },
  isMv: {
    type: Boolean,
    default: true
  }
})

const configObj = {
  playShow: false,
  topShow: false,
  cardType: props.isMv ? 'mv' : 'video',
  userShow: true,
  imgUrl: props.isMv ? 'cover' : 'coverUrl',
  wth: '190px',
  mtop: '5px',
  mbom: '0px'
}

if (props.isMv) {
  getSimi(Number(props.mvid))
} else {
  getVSimi(String(props.mvid))
}
const mvDatas = ref()
function getSimi(id: number) {
  getMvSimi(id).then((res: any) => {
    mvDatas.value = res.mvs
  })
}
function getVSimi(id: string) {
  getViSimi(id).then((res: any) => {
    mvDatas.value = res.data
  })
}
</script>

<style scoped lang="less">
.mv-simi {
  display: flex;
  flex-wrap: wrap;
  // padding: 5px 20px;
  .dt-right {
    text-align: right;
    padding-right: 8px;
  }
}
</style>
